<template>
	<div>
		<div class="tableNavBox">
			<formTemplate :formSet="formSet1" :postData="formData1" :optionData="optionData">
				<template slot="baseLocation" slot-scope="scope">
					<el-form-item label="基地名称：" >
						<el-input v-model="formData1.baseLocation" style="width:500px" disabled>
							 <img slot="suffix" src="@/assets/image/digitalOrchard/dingwei.png" alt="" class="locationBtn" @click="$alert('1111111')"/>
						</el-input>
					</el-form-item>
				</template>
				<template slot="c" slot-scope="scope" >
					<tableForm :pageData="formData1.pageData" :arraySpanMethod="arraySpanMethod" :showSummary="true" :summaryMethod="summaryMethod" :data="tableSet" title="项目清单列表" :addNew="false" :border="true">
						<template slot="addbtn">
							<el-button  round size="mini" type="primary" @click="dialogVisibleEquip = true">新增大类</el-button>	
						</template>
					    <template slot="g" slot-scope="scope" >
					    	<!-- <el-button type="text" size=" " style="color:red" @click="del(scope.row)">删除</el-button> -->
							<div class="btnBox" >
								<span style="color:#67C23A;">查看</span>
								<span style="color:#F56C6C;">删除</span>
							</div>
                        </template>
					</tableForm>
				</template>
0				<template slot="baseName" slot-scope="scope">
					<el-form-item label="客户名称：" >
						<el-select
  						  	v-model="formData1.baseName"
  						  	filterable
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请输入公司名称"
  						  	:remote-method="getCompaniesByKey"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select>
					</el-form-item>
            	</template>
			</formTemplate>
			<div class="B_btnBox">
				<el-button type="primary" round @click="submitData">保 存</el-button>
				<el-button type="primary" round>清单列表</el-button>
				<el-button type="primary" round>配件列表</el-button>
			</div>
			<div style="clear:both"></div>
			<!-- 地图 -->
			<!-- <div class="mapBox2">
				<mars3d mapKey="three" :linkBtn="false" :baseId="formData1.baseId"></mars3d>
			</div> -->
			<!-- <iframe :src="editorMapUrl" width="100%" height="500px" class="iframeMap" :key="mapKey"  style="border: medium none;"></iframe> -->
			<div style="clear:both"></div>
		</div>
		<el-dialog
		  title="请选择设备"
		  :visible.sync="dialogVisibleEquip"
		  width="670px"
		  class="dialog">
		  	<!-- <formTemplate ref="form" :formSet="formSet3" :postData="formDig" :optionData="optionDataDig"  :isDialog="true"  @flag="save" @close="close"></formTemplate> -->
		</el-dialog>
	</div>
</template>

<script>
    import formTemplate from '@/components/form.vue'	
	import tableForm from '@/components/tableForm.vue'
	import BIGENAP from '@/views/digitalOrchard/working/components/Map.vue'
	// import {encode} from '@/utils/encryption.js'
	export default {
		components: {
            formTemplate,
			BIGENAP,
			tableForm
		},
		data() {
			return {
				dialogVisibleEquip:false, //新增大类
				// mapConfig:{
				// 	isOpenEditor: false, // 是否打开编辑
				// 	isShowEditorBtn: false,
				// 	maxZoom: '',
				// 	mapUrl: ''
				// },
                formSet1:[
                     { span: 13, label: '客户名称：', prop: 'baseName', type: 'select' ,labelWidth:'500px' },
                     { span: 13, label: '基地名称：', prop: 'baseLocation', type: 'select' ,labelWidth:'500px' },
                    // { span: 24, label: '服务项目：', prop: 'c', type: 'select', labelWidth:'500px' },
                    { span: 24, label: '图层列表', prop: 'c', type: 'slot' },
                ],
				tableSet:[
					{type:'index'},
                    {type:'text',prop:'area',label:'项目名称'},
                    {type:'text',prop:'baseLocation',label:'设备型号'},
                    {type:'text',prop:'d',label:'项目特征', width:'220px'},
                    {type:'text',prop:'d',label:'计量单位', width:'70px'},
                    {type:'text',prop:'d',label:'工程量'},
                    {type:'text',prop:'d',label:'单价(元)'},
                    {type:'text',prop:'yusuan',label:'预算价(元)'},
                    {type:'text',prop:'d',label:'状态', width:'60px'},
                    {type:'slot',label: '操作', prop:'g'},
                ],
				optionData:{
					baseName:[],
					supplierId:[],
				},
                formData1:{
					pageData:{
						items:[{area:'123',baseLocation:'sad', state:'0', yusuan:'22'}],
						color:{background:'#FAFAFA'}
					}
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				mistiming: '0', // 所选时间的差值
				uploadLoading: false,
				postData: {
				},
				loading:false,
				// // 地图需要的参数
				// mapKey: new Date().getTime(),
				// mapDatas:{
				// 	baseId: '',
				// 	phone: this.$store.state.user.userInfo.phone,
				// 	verificationCode: this.$store.state.user.userInfo.verificationCode,
				// 	t: new Date().getTime(),
				// 	editor: false ,// 是否可以编辑
				// 	linkBtn: false,
				// 	key: 'three'
				// },
				// editorMapUrl: ''
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
			// this.getQueryList()
		},
		mounted() {
			// setTimeout(()=>{
			// 	// 飞图---------到指定位置
			// 	/**
			// 	 * @param {latLng}  坐标 object {lat: 28.92163128242129, lng: 111.70898437500001} or Arry[28.92163128242129,111.70898437500001].
			// 	 * @param {zoom}  显示级别 number
			// 	 */
			// 	this.$refs.BIGENAP.flyingFigure({lat: 28.92163128242129, lng: 111.70898437500001}, 10)
			// }, 5000)
			// this.editorMapUrl = `http://192.168.0.108:3301#${encode(this.mapDatas)}`
		},
		watch: {
			'formData1.baseName'(e){
				console.log(this.formData1);
				this.optionData.baseName.forEach(item =>{
					if(item.value == this.formData1.baseName){
						this.formData1.baseLocation = item.baseLocation
					}
				})
			}
		},
		methods: {
			arraySpanMethod({ row, column, rowIndex, columnIndex }) {
     		},
			summaryMethod(param){
				const { columns, data } = param;
      			const sums = [];
      			columns.forEach((column, index) => {
      			  	if (index === 6) {
      			  	  sums[index] = '合计（元）';
      			  	  return;
      			  	}
					if(column.property == 'yusuan'){
						const values = data.map(item => Number(item[column.property]));
      				    if (!values.every(value => isNaN(value))) {
      				      sums[index] = values.reduce((prev, curr) => {
      				        const value = Number(curr);
      				        if (!isNaN(value)) {
      				          return prev + curr;
      				        } else {
      				          return prev;
      				        }
      				      }, 0);
      				      sums[index] = sums[index].toFixed(2)
      				    } else {
      				      sums[index] = '';
      				    }
					}
      			});

      			return sums;
			},
			submitData(){

			},
			getCompaniesByKey(e){
				this.$request.postForm(this.$api.getCompaniesByKey, {
					keyWord:e
				}).then(res=>{
					if(res.code == 200){
						this.optionData.supplierId = res.data.map(item =>{
							return{
								name:item.supplierName,
								value:item.supplierId,
								createUserId:item.createUserId,
								createUserName:item.createUserName
							}
						})
					}
				})
			},
			handleChange(e){
				console.log(this.optionData.supplierId);
				this.optionData.supplierId.forEach(item =>{
					if(item.value == e){
						this.formData1.createUserName = item.createUserName
						this.formData1.createUserId = item.createUserId
					}
				})
			},
			getQueryList(){
				if(this.$store.state.company.companyId){
					this.$request.postForm(this.$api.queryList, {
					companyId: this.companyId,
					page:this.page,
					pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.optionData.baseName = res.data.items.map(item =>{
								return{
									name:item.baseName,
									value:item.id,
									baseLocation:item.baseLocation
								}
							})
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb,
	.tableNavBox {
		margin-top: 20px;
	}

	.flex{
		display: flex;
		justify-content: space-between;
	}

	.breadcrumb >>>span{
		color: #23B14D;
		cursor: pointer;
	}

	.checkBox{
		display: flex;
		justify-content: flex-start;
		padding-left: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.total {
		text-align: right;
		margin-right: 230px;
		margin-top: 10px;
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.demo-form-inline {
		color: #5C5C5C;
		
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}

	.fileListName {
		width: 500px;
		padding: 0 30px 0 10px;
		position: relative;
		border: 1px solid #DCDCDC;
		margin-bottom: 15px;
		align-items: center;
		color: #5C5C5C;
		border-radius: 5px;
	}

	.fileListNameIcon {
		position: absolute;
		right: 10px;
		cursor: pointer;
		top: 10px;
	}

	.fileListNameIcon:hover,
	.dayNub {
		color: #23B14D;
	}

	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		span{
			cursor: pointer;
			margin-right: 8px;
		}
	}
	.B_btnBox{
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
		button{
			width: 120px;
		}
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.mapBox2{
		width: calc(100% - 40px);
		margin-left: 20px;
		height: 450px;
		margin-bottom: 40px;
		margin-top: 30px;
	}
	.locationBtn{
		width: 18px;height: 18px;position: relative;top: 7px;cursor: pointer;
	}
</style>
